<template>
    <div>
      <!-- 模糊搜索的表单 -->
      <el-form 
        @submit.native.prevent
        :inline="true" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input 
            @keyup.native.enter="search"
            v-model="name" placeholder="请输入姓名关键字"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
  
      <el-divider content-position="left">导演列表</el-divider>
  
      <!-- 导演列表显示 -->
      <person 
        v-for="item in directors" :key="item.id"
        @delete="delPerson(item.id)"
        :name="item.director_name"
        :avatar="item.director_avatar"></person>
  
    </div>
  </template>
  
  <script>
  import myaxios from '@/http/MyAxios'
  import Person from '@/components/Person.vue';
  import httpApi from '@/http';
  
  export default {
    components: { Person },
  
    data() {
      return {
        directors: [],  // 保存所有的导演列表
        name: '',    // 双向数据绑定name输入框
      }
    },
  
    methods: {
      // 删除导演
      delPerson(id){
        // 发送http请求，删除这个导演，必须得获取当前点击的演员的id
        httpApi.DirectorApi.delete({id}).then(res=>{
          if(res.data.code == 200){ // 删除成功
            this.$message({type:'success', message:'恭喜你，删除成功'})
            this.search() //重新查询列表
          }
        })
      },
  
      /** 点击查询按钮后执行，需要判断输入框中是否有关键字 */
      search(){
        if(this.name.trim()==''){  // 没有关键字
          this.listDirectors()
        }else{  // 有关键字
          this.listDirectorsByName()
        }
      },
  
      /** 通过姓名关键字查询导演列表 */
      listDirectorsByName(){
        httpApi.DirectorApi.queryDirectorsByNameLike(
          {name:this.name}).then(res=>{
          console.log('模糊查询的结果', res)
          this.directors = res.data.data
        })
      },
  
      /** 呈现导演列表 */ 
      listDirectors() {
        httpApi.DirectorApi.queryAll(
          {page:1, pagesize:100}).then(res=>{
          // 将res.data.data 存入 this.directors
          this.directors = res.data.data
        })
      }
    },
    // 页面挂在完毕后，发送请求，加载列表数据
    mounted(){
      this.listDirectors()   // 加载导演列表
    }
  };
  </script>
  
  <style lang="scss" scoped></style>
  